<%@ page import = "org.wcms.surrounded.model.*" %>
<%@ page import = "org.wcms.surrounded.web.data.*" %>
<%@ page import = "org.wcms.surrounded.Constants" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<% 	
	User user = (User)session.getAttribute(Constants.SURROUNDED_SESSION_USER); 
	pageContext.setAttribute("isGuest", user.getId() == Constants.SURROUNDED_NEW_USER_ID);		
%>

<!DOCTYPE html>
<html>
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# game: http://ogp.me/ns/game#">
		<meta charset="utf-8">

		<!-- Facebook Open Grap metadata -->
		<meta property="fb:app_id"      content="169613613143468" /> 
		<meta property="fb:admins"		content="666652266" />
		<meta property="og:type"        content="game" /> 
		<meta property="og:url"         content="http://surroundedgame.appspot.com" /> 
		<meta property="og:title"       content="Sorrounded" /> 
		<meta property="og:description" content="Shoot them down" /> 
		<meta property="og:image"       content="http://surroundedgame.appspot.com/img/coin.png" />
		<!-- end of Open Grap metadata -->
		
		<title>Surrounded - Brought to you by Dan Kilman and Ran Ziv</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/game.css">		
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.okShortcut.js"></script>
		<script src="js/jquery.simplemodal-1.4.1.js"></script>
		<script src="js/game.js"></script>
		<c:if test="${!isGuest}">
			<script>
				user.userHighScore = <%= user.getScore() %>;
			</script>
		</c:if>		
		<script>
			if (<%= user.getId() == Constants.SURROUNDED_NEW_USER_ID %>)
			{
				user.identificationState = USER_IDENTIFICATION_STATE_GUEST;				
			}
			else
			{
				user.identificationState = USER_IDENTIFICATION_STATE_REGISTERED;
			}
			
			user.userName = '<%= user.getUserName() %>';
						
		</script>
		
	</head>

    <body>
		<div id="fb-root"></div>
		<script>
		  window.fbAsyncInit = function() {
			FB.init({
			  appId      : '169613613143468', // App ID
			  channelUrl : '//surroundedgame.appspot.com/channel.html', // Channel File
			  status     : true, // check login status
			  cookie     : true, // enable cookies to allow the server to access the session
			  xfbml      : true  // parse XFBML
			});
			
		  };

 		  (function(d){
			 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
			 js = d.createElement('script'); js.id = id; js.async = true;
			 js.src = "//connect.facebook.net/en_US/all.js";
			 d.getElementsByTagName('head')[0].appendChild(js);
		   }(document));
		   
		</script>
	
		<div id="content">
		
			<div id="top-panel">
				<div id="top-left-panel" class="top-panel">
				
					<div id="game-info" class="game-box">
						<h1 id="game-title">Surrounded</h1>
						<p>
							<span>You are surrounded.</span>
							<span>Eight evil spaceships wish to shoot you down.</span>
							<span>You can't kill them. You can't escape.</span>
							<span>You simply have to try and deflect their everlasting attacks for as long as possible.</span>
							<span>Enjoy!</span>
						</p>
					</div>
				
					<div id="score-board" class="game-box">
						<span class="score-board-item" id="game-lives">
							<span>Lives</span><span class="score-value"></span>
						</span>
						<span class="score-board-item" id="game-score">
							<span>Score</span><span class="score-value"></span>
						</span>
						<span class="score-board-item" id="game-max-combo">
							<span>Max combo</span><span class="score-value"></span>
						</span>
						<span class="score-board-item" id="game-current-combo">
							<span>Current combo</span><span class="score-value"></span>
						</span>
						<span class="score-board-item" id="game-other-shots-hit">
							<span>Other shots hit</span><span class="score-value"></span>
						</span>
						<span class="score-board-item" id="game-other-shots-suffered">
							<span>Other shots suffered</span><span class="score-value"></span>
						</span>
						<span class="score-board-item" id="game-awards-gathered">
							<span>Awards gathered</span><span class="score-value"></span>
						</span>
						<span class="score-board-item" id="game-awards-shot-down">
							<span>Awards shot down</span><span class="score-value"></span>
						</span>
					</div>
				
					<div id="game-control" class="game-box">
						<ol class="game-control-menu">
							<li class="game-control-menu-option">
								<span id="new-game" class="game-control-menu-option-text">New Game (N)</span>
							</li>
							<li class="game-control-menu-option">
								<span id="pause-game" class="game-control-menu-option-text">Pause Game (P)</span>
							</li>
							<li class="game-control-menu-option">
								<span id="speed-setting" class="game-control-menu-option-text">Speed Settings</span>
								<ol class="speed-setting-option-list display-off">
									<li class="speed-setting-option">
										<span class="speed-setting-option-text selected-game-setting" title="1">Beginner</span>
									</li>
									<li class="speed-setting-option">
										<span class="speed-setting-option-text" title="3">Normal</span>
									</li>
									<li class="speed-setting-option">
										<span class="speed-setting-option-text" title="5">Hard</span>
									</li>
									<li class="speed-setting-option">
										<span class="speed-setting-option-text" title="7">Insane</span>
									</li>
								</ol>
							</li>
							<li class="game-control-menu-option">
								<span id="action-setting" class="game-control-menu-option-text">Action Settings</span>
								<ol class="action-setting-option-list display-off">
									<li class="action-setting-option">
										<span class="action-setting-option-text selected-game-setting" title="2">Beginner</span>
									</li>
									<li class="action-setting-option">
										<span class="action-setting-option-text" title="4">Normal</span>
									</li>
									<li class="action-setting-option">
										<span class="action-setting-option-text" title="6">Hard</span>
									</li>
									<li class="action-setting-option">
										<span class="action-setting-option-text" title="8">Insane</span>
									</li>
								</ol>
							</li>
						</ol>
					</div>
				</div>
				
				<div id="game-board" class="top-panel">
					<canvas id="surface" width="420" height="420"/>
				</div>
			
				<div id="top-right-panel" class="top-panel">
				
					<div id="game-user" class="game-box">						
						<div id="game-user-details">
							<span id="game-user-details-username">
								<span class="game-user-details-value" id="user-name"><%= user.getUserName() %></span>
							</span>
							<span id="game-user-details-score">
								<span class="game-user-details-key">Best Score</span>
								<span class="game-user-details-value" id="user-high-score"></span>
							</span>
						</div>
					</div>
				
					<div id="social-box" class="game-box">
						<%-- TODO redirect uri should be set with prefix https or http depending on context --%>
						<div id="log-in">
							<div class="fb_button_text">
								<a target="_blank" href="">Log In With Facebook</a>
							</div>
							<div id="non_fb_login_link">
								<div>Don't have a Facebook account?</div>
								<a target="_blank" href="http://0.surroundedgame.appspot.com/">Click here to play with custom accounts</a>
							</div>
						</div>
						<div id="log-out"><a href="logout">Logout</a></div>
						<div class="fb-like" data-layout="button_count" data-width="230"></div>
						<div class="fb-comments" data-href="http://surroundedgame.appspot.com" data-num-posts="1" data-width="230"></div>
					</div>
				
					<div id="game-rules" class="game-box">
						<h2 id="game-rules-title">Game Rules</h2>
						<div id="game-rules-text" class="display-off">
							<ul>
								<li>You are the bazooka at the center.</li>
								<li>The evil spaceships around you will shoot both shots and awards at you.</li>
								<li>You start with 10 lives - which will decrease upon getting hit by their shots, or by shooting at the awards.</li>
								<li>To shoot in a certain direction, use the keys around 'S' (e.g. 'A' shoots left).</li>
							</ul>
							
							<p>
								Trying to "kill" your enemies is futile - If a shot of yours reaches an evil spaceship,
								it will re-appear as an enemy shot on the other side of the board!
							</p>

							<h3>Score details:</h3>
							<ul>
								<li>+X point for hitting an enemy shot / gathering an award</li>
								<li>-X point for hitting an award / suffering an enemy shot</li>
							</ul>							
							<span id="game-rules-score-further-explanation">
								Where X is compromised of the product of the current Speed and Action settings.
								(For example, if the game is played on Speed level 2, and Action level 3, then X=6)
							</span>
							
							<h3>Key Points</h3>
							<ul id="game-rules-summary">
								<li>Shoot evil bullets</li>
								<li>Do not shoot good golden coins</li>
							</ul>

							<p>Good Luck!</p>
						</div>
					</div>
				</div>
			</div>
		
		</div>

			
		<div id='game-end-box' class='modal-box'>
			<h1>Game Over!</h1>
			<h2> Your score for this game is: <span class='game-score'></span></h2>
			
			<div id='game-end-state-guest'>
				<div id='game-end-login-suggest'>Would you like to register or play under a certain name so we could save your score?</div>
				<button type='button' id='showIdentificationModalButton'>Yes</button>
				<button type='button' id='skipIdenticicationModalButton'>No thanks</button>	
			</div>
			
			<div id='game-end-state-non-guest'>
				<button type='button' id='continueToHighscoresButton'>Continue to view High Scores</button>
			</div>
			
		</div>
		
		<div id='high-scores-box' class='high-scores-data modal-box'>
			<h1>High Scores</h1>
			<div id='table-data'>
			
			</div>
		</div>
		
	</body>
</html>